<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button type="button" onclick="batchDel()">批量删除</button>
		<table border="" cellspacing="" cellpadding="">
		</table>
		<h1 id="h1_total">总价格：￥</h1>
		<script type="text/javascript">
			let table = document.getElementsByTagName("table")[0];

			let books = [{
					id: 1,
					name: 'Java从入门到放弃',
					price: 80,
					tdate: '2020-07-01',
					count: 1
				},
				{
					id: 2,
					name: 'Vue从入门到放弃',
					price: 90,
					tdate: '2020-07-02',
					count: 1
				},
				{
					id: 3,
					name: 'Mysql从入门到放弃',
					price: 100.01,
					tdate: '2020-07-03',
					count: 1
				},
				{
					id: 4,
					name: '啥都从入门到放弃',
					price: 70.00,
					tdate: '2020-07-04',
					count: 1
				},
			];

			/**
			 * 绘制表头
			 */
			function drawHead() {
				let thead = document.createElement("thead");
				//将thead标签添加到table标签中
				table.appendChild(thead);
				let tr = document.createElement("tr");
				thead.appendChild(tr);
				let titles = ["序号", "书籍名称", "出版日期", "价格", "购买数量", "操作"];
				let th = document.createElement("th");
					th.innerHTML = "<input type='checkbox' name='cb_sel_all' />";
				tr.appendChild(th);
				for (let item of titles) {
					th = document.createElement("th");
					th.innerText = item;
					tr.appendChild(th);
				}
			}

			let tbody;

			/**
			 * 绘制内容
			 */
			function drawBody() {
				tbody = document.createElement("tbody");
				table.appendChild(tbody);
				for (let index in books) {
					let item = books[index];
					let tr = document.createElement("tr");
					tbody.appendChild(tr);
					let td;
					td = document.createElement("td");
					// td.innerHTML = "<input type='checkbox' name='cb_sel' value='" + item.id + "' />";
					td.innerHTML = `<input type='checkbox' name='cb_sel' value='${item.id}' />`;
					tr.appendChild(td);
					td = document.createElement("td");
					td.innerText = item.id;
					tr.appendChild(td);
					td = document.createElement("td");
					// td.innerText = item.name;
					let span = document.createElement("span");
					span.innerText = item.name;
					td.appendChild(span);
					
					let input = document.createElement("input");
					input.type = "text";
					input.value = item.name;
					input.hidden = true;
					td.appendChild(input);
					
					tr.appendChild(td);
					
					td = document.createElement("td");
					// td.innerText = item.tdate;
					
					span = document.createElement("span");
					span.innerText = item.tdate;
					td.appendChild(span);
					
					input = document.createElement("input");
					input.type = "text";
					input.value = item.tdate;
					input.hidden = true;
					td.appendChild(input);
					
					tr.appendChild(td);
					
					td = document.createElement("td");
					// td.innerText = "￥" + item.price;
					
					span = document.createElement("span");
					span.innerText = "￥" + item.price;
					td.appendChild(span);
					
					input = document.createElement("input");
					input.type = "text";
					input.value = "￥" + item.price;
					input.hidden = true;
					td.appendChild(input);
					
					tr.appendChild(td);
					
					td = document.createElement("td");
					td.innerHTML = `
						<div>
							<button type="button" onclick="mouse(${index})">-</button>
							<span>${item.count}</span>
							<button type="button">+</button>
						</div>
					`;
					
					input = document.createElement("input");
					input.type = "text";
					input.value = item.count;
					input.hidden = true;
					td.appendChild(input);
					
					tr.appendChild(td);
					td = document.createElement("td");
					// <button type="button" onclick="del(this)">移除</button>
					td.innerHTML = `
						<button type="button" onclick="del(${index})">移除</button>
						<button type="button" onclick="edit(this)">编辑</button>
						<button type="button" onclick="save(this, ${index})" hidden>保存</button>
					`;
					tr.appendChild(td);
				}
			}
			
			/**
			 * 编辑按钮功能
			 */
			function edit(self) {
				//将td中的input显示，其它隐藏
				console.log(self);
				let tr = self.parentNode.parentNode;
				let td = tr.children[1];//名称
				td.getElementsByTagName("span")[0].hidden = true;
				td.getElementsByTagName("input")[0].hidden = false;
				td = tr.children[2];//日期
				td.getElementsByTagName("span")[0].hidden = true;
				td.getElementsByTagName("input")[0].hidden = false;
				td = tr.children[3];//价格
				td.getElementsByTagName("span")[0].hidden = true;
				td.getElementsByTagName("input")[0].hidden = false;
				td = tr.children[4];//数量
				td.getElementsByTagName("div")[0].hidden = true;
				td.getElementsByTagName("input")[0].hidden = false;
				
				//将编辑隐藏，将保存按钮显示
				self.hidden = true;
				let btn_save = self.parentNode.getElementsByTagName("button")[2];
				btn_save.hidden = false;
			}
			
			function save(self, index) {
				//修改数据
				let editItem = books[index];
				let tr = self.parentNode.parentNode;
				let td = tr.children[1];//名称
				editItem.name = td.getElementsByTagName("input")[0].value;
				td = tr.children[2];//日期
				editItem.tdate = td.getElementsByTagName("input")[0].value;
				td = tr.children[3];//价格
				editItem.price = td.getElementsByTagName("input")[0].value;
				td = tr.children[4];//数量
				editItem.count = td.getElementsByTagName("input")[0].value;
				// console.log(books);
				clearBody();
				drawBody();
			}
			
			function del(index) {
				/*
					this关键字：表示当前操作的标签或对象
						以及函数的调用者
				*/
			   // console.log(this);//表示的window对象
			   // console.log(self);//当前点击的标签
			   //获取父节点
			   // console.log(self.parentNode.parentNode);
			   // self.parentNode.parentNode.remove();
			   books.splice(index, 1);
			   clearBody();
			   drawBody();
			}

			/**
			 * 清除tbody中的所有内容
			 * 也会将tbody标签删除
			 */
			function clearBody() {
				// for(let item of tbody.children) {
				// 	tbody.remove(item);
				// }
				do{
					tbody.removeChild(tbody.firstChild);
				}while(tbody.hasChildNodes());
			}

			/**
			 * 减按钮点击
			 */
			function mouse(index) {
				console.log("mouse" + index);
				//获取正在修改数量
				let editItem = books[index];
				//修改count属性
				editItem.count--;
				//只修改的行标签
				// let editTr = tbody.children[index];
				// let editTd = editTr.children[4];
				// let editSpan = editTd.getElementsByTagName("span")[0];
				// // console.log(editSpan);
				// editSpan.innerText = editItem.count;
				//全部重新绘制
				// console.log(books);
				clearBody();
				drawBody();
				calTotal();
			}
			
			/**
			 * 计算总价格
			 */
			function calTotal() {
				console.log("calTotal");
				let total = 0;
				for(let item of books) {
					total += item.price * item.count;
				}
				let h1_total = document.getElementsByTagName("h1")[0];
				console.log(h1_total);
				h1_total.innerText = "总价格：￥" + total;
			}
			
			function batchDel() {
				// console.log("batchDel");
				//确认是否真的删除
				let yes = confirm("是否删除选中的数据?");
				if(!yes) {
					return;
				}
				//尽量不要让代码超过5层缩进。如果太多，缩进地狱，比如写了18层，
				// 1、第一行添加复选框
				// 2、添加批量删除的按钮
				// 3、按钮点击时获取第一列所有复选框，遍历checked属性
				// 	再找到index，确定操作的数据索引，直接从数组中删除
				//获取第一列所有复选框
				let cb_sel_list = document.getElementsByName("cb_sel");
				console.log(cb_sel_list);
				for(let index in cb_sel_list) {
					let item = cb_sel_list[index];
					//遍历checked属性
					// console.log(item.checked);
					if(item.checked) {
						//再找到index，确定操作的数据索引，直接从数组中删除
						// books.splice(index, 1);
						let value = item.value;//input标签的value都是string类型
						deleteById(value);
					}
				}
				// 4、刷新表格
				clearBody();
				drawBody();
				calTotal();
			}
			
			/**
			 * 根据id删除books数据
			 * @param {Object} 
			 */
			function deleteById(id) {
				for(let index in books) {
					let item = books[index];
					// console.log(typeof item.id);
					// console.log(typeof id);
					// console.log(item.id === id);
					if(item.id === parseInt(id)) {
						books.splice(index, 1);
					}
				}
			}

			drawHead();
			drawBody();
			calTotal();
			
			/*
				实现编辑功能，
					1、点击编辑按钮，将被点击的按钮的那一行，变为输入框。
						1、如何确定被点击的那一行？
						2、原来文字如何隐藏，input标签如何添加到指定的td中
						3、点击保存，获取输入框中的内容，放到对应的属性上
					2、序号不允许编辑
					3、编辑按钮的文字变为保存，再点击就实现将数据保存到数组中
					4、双击单元格，则只是编辑被双击的单元格
					5、在表格中的第一列，设置为一个复选框，在表格的上面加一个批量删除按钮
						点击则删除所有被勾选的数据。表头这一行也有一个复选框，点击勾选时，
						则实现全选功能。
						1、第一行添加复选框，value设置为id值
						2、添加批量删除的按钮
						3、按钮点击时获取第一列所有复选框，遍历checked属性
							再找到index，确定操作的数据索引，直接从数组中删除。发现有错误
							通过value获取id值，根据id去数组中删除数据。
						4、刷新表格
			*/
		</script>
	</body>
</html>
